<div>
    <div class="form-group small" data-bind="visible: $root.possibleMentors().length === 0">
        <label class="control-label">&nbsp;</label>
        <div class="text-warning bg-warning padding padding-xs">
            <div class="flex-horizontal">
                <small>
                    <i class="icon-warning"></i>
                </small>
                <small class="margin-left margin-left-sm">
                    Currently, the responsible node cannot be selected because there are no nodes available.
                </small>
            </div>
        </div>
    </div>

    <div data-bind="validationElement: mentorNode, collapse: manualChooseMentor">
        <div class="form-group" data-bind="css: { 'margin-bottom-xs': mentorNode() }">
            <div>
                <label class="control-label">Responsible Node</label>
            </div>
            <div class="flex-grow">
                <button class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown">
                    <span data-bind="text: mentorNode() ? 'Node ' + mentorNode() : 'Select responsible node'"></span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" data-bind="foreach: $root.possibleMentors">
                    <li><a href="#" data-bind="text: 'Node ' + $data, click: $parent.mentorNode.bind($parent.mentorNode, $data)"></a></li>
                </ul>
                <span class="help-block" data-bind="validationMessage: mentorNode"></span>
            </div>
        </div>
        <div data-bind="visible: mentorNode">
            <div class="form-group small">
                <div class="toggle" data-placement="right" data-toggle="tooltip" title="Toggle on to pin selected node" data-animation="true">
                    <input id="pinMentorNode" type="checkbox" data-bind="checked: pinMentorNode">
                    <label for="pinMentorNode">Pin node</label>
                </div>
            </div>
        </div>
        <div data-bind="visible: mentorNode">
            <div class="form-group small">
                <div class="flex-grow" data-bind="compose: $root.pinResponsibleNodeTextScriptView"></div>
            </div>
        </div>
    </div>
</div>
